import React, { useEffect, useState } from "react";
import { Card, Form, InputNumber, Row, Col, Select, Input, Checkbox, Space  } from "antd";
import { fetchOrderSelectCoupon } from "../../services";
import { isBoxPrice, isCbmPrice, isKgsPrice, isTaxFlag, isTsBg, isinsuranceFlag, takePickUp } from "@/utils/dictUtil";

const { Item } = Form;
const rules = [{required: true}];
const labelCol = {
  span: 8
}

const FeeInfo = ({form, companyInfoForm, sendInfoForm, productInfoForm, goodsInfoForm, otherInfoForm, isPreOrderConvertOrder}: any) => {
  const [couponList, setCouponList] = useState([]);

  const customerCode = Form.useWatch('customerCode', companyInfoForm);
  const country = Form.useWatch('country', sendInfoForm);
  const product = Form.useWatch('product', productInfoForm);
  const dportCode = Form.useWatch('dportCode', productInfoForm);
  const deliveryMethod = Form.useWatch('deliveryMethod', productInfoForm);
  const totalWeight = Form.useWatch('totalWeight', goodsInfoForm);
  const totalVol = Form.useWatch('totalVol', goodsInfoForm);
  const billMethod = Form.useWatch('billMethod', otherInfoForm);
  const price = Form.useWatch('price', form);
  const systemPrice = Form.useWatch('systemPrice', form);
  const insuranceFlag = Form.useWatch('insuranceFlag', otherInfoForm);
  // const declaredCargoValue = Form.useWatch('declaredCargoValue', otherInfoForm);
  const taxFlag = Form.useWatch('taxFlag', otherInfoForm);
  const pickupWay = Form.useWatch('pickupWay', sendInfoForm);
  const bgMethod = Form.useWatch('bgMethod', otherInfoForm);
  const couponId = Form.useWatch('couponId', form);
  const feeVol = Form.useWatch('feeVol', form);
  const feeWeight = Form.useWatch('feeWeight', form);
  const pickupFee = Form.useWatch('pickupFee', form);
  const pickupFeeType = Form.useWatch('pickupFeeType', form);
  const orderCode = Form.useWatch('orderCode', form);

  useEffect(() => {
    // 查询优惠券
    const arr = [
      customerCode,
      country,
      product,
      dportCode,
      deliveryMethod,
      totalWeight,
      totalVol,
      billMethod,
      price,
    ];
    const verifyResult = arr.every(v => !!v);
    if (!verifyResult || (isKgsPrice(billMethod) && !feeWeight) || (isCbmPrice(billMethod) && !feeVol)) {
      return;
    }
    fetchOrderSelectCoupon({
      customerCode,
      country,
      product,
      dportCode,
      deliveryMethod,
      totalWeight,
      totalVol,
      billMethod,
      price,
      feeWeight,
      feeVol,
      orderCode
    }).then(
      res => {
        const arr = res || [];
        setCouponList(arr.map((v: any) => ({...v, label:v.couponName, value: v.couponId})));
        if (!arr?.length) {
          form.setFieldsValue({
            couponName: undefined,
            couponId: undefined,
            couponAmount: undefined
          });
        }
      }
    )
  }, [customerCode, country, product, dportCode, deliveryMethod, totalWeight, totalVol, billMethod, price, feeVol, feeWeight]);

  useEffect(() => {
    // 包税
    if (isTaxFlag(taxFlag)) {
      form.setFieldValue('taxFee', 0);
    }
  }, [taxFlag]);

  useEffect(() => {
    if (isTsBg(bgMethod)) {
      form.setFieldValue('bgFee', 350);
    } else {
      form.setFieldValue('bgFee', 0);
    }
  }, [bgMethod]);

  useEffect(() => {
    const curr = couponList.find((v: any) => v.value === couponId);
    form.setFieldsValue({
      couponName: curr ? curr.label : undefined,
      couponAmount: curr ? curr?.couponAmount : undefined
    });
  }, [couponId, JSON.stringify(couponList)]);

  useEffect(() => {
    if (pickupFee === -1) {
      form.setFieldValue('pickupFeeType', true);
    } else {
      form.setFieldValue('pickupFeeType', false);
    }
  }, [pickupFee]);

  const handlePickupFeeChange = (e: any) => {
    if (e.target.checked) {
      form.setFieldValue('pickupFee', -1);
    } else {
      form.setFieldValue('pickupFee', undefined);
    }
  }

  return (
    <Card title="报价及费用预估" className="mt15">
      <Form form={form} labelCol={labelCol}>
        <Row>
          <Col span={6}>
            {
              isBoxPrice(billMethod) ? (
                <Item label="运费总价/元" name="price" rules={rules} extra={systemPrice > price ? <span style={{color: 'orange'}}>建议卖价: {systemPrice}</span> : undefined}>
                  <InputNumber disabled={isPreOrderConvertOrder} min={10000} style={{width: 200}} />
                </Item>
              ) : (
                <Item label="运费单价/元" name="price" rules={rules} extra={systemPrice > price ? <span style={{color: 'orange'}}>建议卖价: {systemPrice}</span> : undefined}>
                  <InputNumber disabled={isPreOrderConvertOrder} min={0} style={{width: 200}} />
                </Item>
              )
            }
            <Item name="systemPrice" noStyle hidden>
              <InputNumber />
            </Item>
          </Col>
          <Col span={6}>
            <Item label="税金/元" name="taxFee">
              <InputNumber  min={0} disabled={isTaxFlag(taxFlag)} style={{width: 200}} />
            </Item>
          </Col>
          {
            takePickUp(pickupWay) && (
              <Col span={6}>
                <Item label="提货费/元" required>
                  <Space direction="horizontal">
                    <Item noStyle name="pickupFee" rules={[{required: true, message: '请输入提货费'}]}>
                      <InputNumber disabled={pickupFeeType} min={-1} style={{width: 100}} />
                    </Item>
                    <Item noStyle name="pickupFeeType" valuePropName="checked">
                      <Checkbox onChange={handlePickupFeeChange}>实报实销</Checkbox>
                    </Item>
                  </Space>
                </Item>
              </Col>
            )
          }
          <Col span={6}>
            <Item label="报关费/元" name="bgFee">
              <InputNumber min={0} disabled style={{width: 200}} />
            </Item>
          </Col>
        </Row>
        <Row>
          <Col span={6}>
            <Item label="商检费/元" name="cargoCheckFee">
              <InputNumber min={0} style={{width: 200}} />
            </Item>
          </Col>
          {/* <Col span={6}>
            <Item label="附加费单价/元" name="additionalPrice">
              <InputNumber min={0} style={{width: 200}} />
            </Item>
          </Col> */}
          <Col span={6}>
            <Item label="附加费/元" name="additionalFee">
              <InputNumber min={0} style={{width: 200}} />
            </Item>
          </Col>
          {
            isinsuranceFlag(insuranceFlag) && (
              <Col span={6}>
                <Item label="保费/元" name="insuranceFee">
                  <InputNumber disabled style={{width: 200}} />
                </Item>
              </Col>
            )
          }
        </Row>
        <Item label="优惠券" name="couponId" labelCol={{span: 2}}>
          <Select options={couponList} style={{width: 200}} />
        </Item>
        <Item hidden noStyle name="couponName">
          <Input />
        </Item>
        <Item hidden noStyle name="couponAmount">
          <Input />
        </Item>
        <Item hidden noStyle name="feeVol">
          <Input />
        </Item>
        <Item hidden noStyle name="feeWeight">
          <Input />
        </Item>
        <Item hidden noStyle name="orderCode">
          <Input />
        </Item>
        <Item label="备注" name="remark" labelCol={{span: 2}}>
          <Input.TextArea rows={3} style={{width: 500}} />
        </Item>
      </Form>
    </Card>
  );
}
export default FeeInfo;